<template>
  <el-radio-group v-model="selectedValue" class="select-container">
    <el-radio
        v-for="(option, index) in options"
        :key="index"
        :label="option.label"
    >
      {{ option.name }}
    </el-radio>
  </el-radio-group>
</template>

<script>
export default {
  name: 'DynamicRadioGroup',
  props: {
    // 选项配置数组，格式为 [{ name: '选项名称', label: '选项值' }]
    options: {
      type: Array,
      required: true,
      validator: (value) => {
        // 验证数组中的每个对象是否包含 name 和 label 属性
        return value.every((item) => item.name && item.label);
      }
    },
    // 绑定值
    value: {
      type: [String, Number],
      default: ''
    }
  },
  computed: {
    selectedValue: {
      get() {
        return this.value;
      },
      set(newValue) {
        this.$emit('input', newValue); // 触发 input 事件，更新父组件的绑定值
      }
    }
  }
};
</script>

<style scoped>
.select-container {
  display: flex;
  flex-wrap: wrap; /* 如果选项过多，可以换行 */
  margin-top: 10px;
  margin-left: 10px;
}

.el-radio {
  margin-right: 16px; /* 选项之间的间距 */
}
</style>
